<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Markdown</title>
</head>
<style>
  /* .container {
    width: 1000px;
    height: 800px;
    border: 1px solid #ddd;
    display: flex;
  }

  .container-pre {
    width: 50%;
    height: 800px;
    border: 1px solid #ddd;
    font-size: 50px;
  }

  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
  }

  .preview {
    background-color: #fafbfc;
    border-left: 2px solid #ddd;
  } */
  img {
    width: 100%;
  }

  .editor {
    display: flex;
    width: 80vw;
    /* 最小高度保证可编辑区域高度随内容不断变高 */
    min-height: 800px;
    border: 1px solid #ccc;
    margin: 50px auto 0;
    box-shadow: 0px 0px 4px 2px lightgray;
  }

  pre {
    /* 让可编辑区域高度和父元素一样高, 如果设置 height: 100%; 不生效 */
    min-height: 800px;
    margin: 0;
    padding: 10px;
    outline: none;
    font-size: 16px;
    /*
          保留元素内的空白符序列，但是正常地进行换行
          即元素内容如果超出了盒子宽度，进行换行, 默认为 pre 不会进行换行
        */
    white-space: pre-wrap;
    /* 允许长的内容可以自动换行 */
    word-wrap: break-word;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  }

  .container-pre {
    flex: 1;
    width: 100%;
  }

  .container-pre:empty::before {
    content: attr(placeholder);
    color: rgba(0, 0, 0, 0.45);
  }

  .division-pre {
    flex: 1;
    border-left: 1px solid #ccc;
  }
</style>

<body>
  <div id="container" class="editor">
    <pre id="container-pre" class="container-pre" contenteditable="true"></pre>
  </div>
</body>

</html>